<template>
    <div v-loading="loading">
        <el-card>
            <template #header>
                <div>
                    用户列表
                    <el-button type="text" @click="$router.push({ name: 'UsersAdd' })">
                        添加
                    </el-button>
                </div>
            </template>
            <!-- 搜索框 -->
            <div style="margin-top: 15px;">
                <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select">
                    <el-select v-model="searchField" slot="prepend" placeholder="请选择" style="width: 100px;">
                        <el-option label="用户名" value="username"></el-option>
                        <el-option label="手机" value="phone"></el-option>
                        <el-option label="邮箱" value="email"></el-option>

                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="getUsersLoading"></el-button>
                </el-input>
            </div>
            <el-table :data="users.users.result" border stripe>
                <el-table-column prop="username" label="用户" width="100px">
                </el-table-column>
                <el-table-column label="性别" width="100px">
                    <!-- 可以写自定义内容
                        默认插槽可以结构出来row，row里面是这一列的数据
                        -->
                    <template #default="{ row }">
                        {{ ['女', '男'][row.gender] }}
                    </template>
                </el-table-column>
                <el-table-column prop="email" label="邮箱" width="150px">
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="150px">
                </el-table-column>
                <el-table-column prop="group" label="权限" width="150px">
                </el-table-column>
                <el-table-column label="创建时间">
                    <template #default="{ row }">
                        <div>
                            {{ dayjs(row.ctime).format('YYYY-MM-DD HH:mm:ss') }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150px">
                    <template #default="{ row }">
                        <el-button type="text" @click="edit(row._id)">
                            编辑
                        </el-button>
                        <el-button type="text" @click="del(row._id)">
                            删除
                        </el-button>
                        <!-- 设置权限 -->
                        <el-button type="text" @click="$router.push({name:'UsersGroup',query:{id:row._id}})">
                            权限
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页功能 -->
        <div style="margin-top: 20px;">
            <el-pagination :page-size="5" layout="prev, pager, next" :total="users.users.count" background
                @current-change="changePage">
            </el-pagination>
        </div>
    </div>
</template>
<script>
// 映射状态管理
import { mapActions, mapState } from 'vuex';
import dayjs from 'dayjs';
export default {
    data() {
        return {
            loading: false,
            page: 1,
            searchValue: '',
            searchField: 'username',
        };
    },
    computed: {
        ...mapState(['users']),
    },
    created() {
        // this.$store.dispatch('users/getUsers');
        this.getUsersLoading();
    },
    methods: {
        ...mapActions('users', ['getUsers','deleteUser']), // 映射users模块中的getUsers方法
        edit(id) {
            this.$router.push({ name: 'UsersEdit', params: { id } });
        },
        dayjs(date) {
            return dayjs(date);
        },
        async del(id) {
            try {
                await this.$confirm('确定删除吗');
                this.loading = true;
                await this.deleteUser(id);
                await this.getUsersLoading();
            } catch (error) {}
            this.loading = false;
        },
        async getUsersLoading() {
            this.loading = true;
            const params = ({
                page: this.page,
                perPage: 5,
                // searchValue: this.searchValue,
                // searchField: this.searchField,
            });
            // 如果搜索框有值，就把搜索的值和字段传给后端,没有就不传，避免传空值
            if (this.searchField && this.searchValue) {
                params.searchField = this.searchField;
                params.searchValue = this.searchValue;
            }
            try {
                await this.getUsers(params);
            } catch (error) { }
            this.loading = false;
        },
        changePage(e) {
            this.page = e;
            this.getUsersLoading();
        },
    },
};
</script>